import React from "react"
import MainTitle from "../../component/main_title/main_title"
import {Link} from "react-router-dom"
import ProductDeail from "./product_detail/productDetail"
import {BaseReq} from "../../utils/baseReq"
import axios from "axios"

import "./product.scss"
const baseReq =new BaseReq()


class Product extends React.Component{
    constructor(props){
        super(props)
        this.state={
            productcategory_list:[],
            productListByCategoryId:[],
            categoryId:1
        }
    }
    
    componentDidMount(){
    axios.get("/product/category/list_all").then(res=>{
        this.setState({
            productcategory_list:res.data.data.productcategory_list,
            
        })
    })
    
         let data={
            "type_list":[this.state.categoryId],
            "page":0,
            "size":10
        }
    baseReq._axios({
        url:"product/product_info/list",
        type:"post",
        data:JSON.stringify(data)
    },(res)=>{
        console.log(res)
        console.log(this);
        
        this.setState({
            productListByCategoryId:res.data.data
        })
    })
    
    }
    changeCategoryId(event){
        console.log(event.target.getAttribute("data-id"))
        let id=event.target.getAttribute("data-id")
        this.setState({
            categoryId:id
        })
        //  let data={
        //     "type_list":[id],
        //     "page":0,
        //     "size":10
        // }
        // baseReq._axios({
        //     url:"product/product_info/list",
        //     type:"post",
        //     data:JSON.stringify(data)
        // },(res)=>{
        //     console.log(res)
        //     this.setState({
        //         productListByCategoryId:res.data.data
        //     })
        // })

    }
    
    render(){
       console.log(this.state.productListByCategoryId)
        
        return(
            <div id="page-wrapper">
                <MainTitle title="商品管理">
                <div className="page-header-right">
                <Link to="/product/add" className="btn btn-primary">
                    <i className="fa fa-plus"></i>
                    <span>添加商品</span>
                </Link>
                </div>
                </MainTitle>
                <div className="row">
                {this.state.productcategory_list.map((item,index)=>{
                    return (
                        // <div className="count btn btn-primary" key={index}>
                            <button onClick={this.changeCategoryId.bind(this)} data-id={item.categoryId} key={index} className="count btn btn-primary">
                                {item.categoryName}
                            </button>
                        // </div>
                    )
                })}
                
                </div>
                <ProductDeail productListByCategoryId={this.state.productListByCategoryId} key={this.state.productListByCategoryId} id={this.state.categoryId}/>
                
                   
                
            </div>
        )
    }
}
export default Product